<template>
	<div id="cardmaking" class="same-change-oldstyle">
		<div class="cardmakingwrap">
			<div class="same-head-box">
                <div class="saem-seat-box">
                    <div class="saem-seat-left">
                        <span>当前位置：</span>
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: '/cardrecharge' }">水卡管理</el-breadcrumb-item>
							<el-breadcrumb-item>在线制卡</el-breadcrumb-item>
						</el-breadcrumb>
                    </div>
                    <div class="saem-seat-right">
                        <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                        <!-- <button class="same-search-btns" @click="returnBack">返回</button>	  -->
                    </div>
                </div>
            </div>
			<div class="searchitems">
				<p>读卡器状态：<span :class=" state == '未连接' ? 'red' : 'green' ">{{state}}</span></p>
			</div>

			<div class="searchitems">
				<span style="margin-right: 10px">当前母卡选择：</span>
				<el-select v-model="changeval" placeholder="请选择母卡" @change="currentSel">
					<el-option v-for="item in cardlist" :key="item" :label="item" :value="item"></el-option>
				</el-select>
				<el-button icon="el-icon-plus" class='addbtn' @click="addcard"></el-button>
			</div>

			<div class="searchitems">
				<span style="margin-right: 10px">水卡卡号：</span>
				<el-input placeholder="请输入内容" v-model="cardnum" :disabled="true"></el-input>
				<button @click="ReadCard()">查询</button>
			</div>

			<div class="searchitems">
				<div class="disfle" v-show="!Tips3 && Tips2==2">
					<p  class="tips">提示：<span>水卡信息与当前母卡不匹配是否强制修改为当前母卡信息</span>
						<el-radio style="margin-left: 15px" v-model="radio" label="1" @change='radiochange'>是</el-radio>
						<el-radio v-model="radio" label="2" @change='radiochange'>否</el-radio>
					</p>
				</div>
				<div class="disfle" v-show="!Tips3 && Tips2==1">
					<p class="tips">提示：<span>非本单元卡、不能制卡</span></p>
				</div>
				<div class="disfle" v-show="Tips3">
					<p class="tips">提示：<span>已经制卡，无需重复制卡</span></p>
				</div>
			</div>

			<button class="mackbtn" @click="Cardmaking()" v-show="!btnShow">制卡</button>
			<button class="mackbtn clickno" v-show="btnShow">制卡</button>
		</div>

		<!--弹窗-->
		<div class="addmodel" v-show="modelshow">
			<div class="toptitle">
				<p>添加母卡</p>
				<i class="el-icon-circle-close-outline" @click="closemodel()"></i>
			</div>
			<div class="inputitem">
				<span>母卡卡号</span>
				<el-input v-model="addmotherCard" placeholder="请输入母卡卡号"></el-input>
			</div>
			<button @click="addmother()">确认添加</button>
		</div>
	</div>
</template>

<script>
	function dkq() {
		let script1 = document.createElement('script');
		script1.src = 'http://127.0.0.1:8008/YOWOCloudRFIDReader.js';
		document.body.appendChild(script1);
		let script2 = document.createElement('script');
		script2.src = '../../../static/js/dkq.js';
		document.body.appendChild(script2);
	}
	export default {
		name: 'cardmaking',
		data: function() {
			return {
				state: '未连接',
				value: {
					bn: '',
					area_num: '',
					area_code: '',
					key: '',
				},
				radio: '1',
				modelshow: false,
				Key: '',
				Bn: '',
				cardnum: '',
				motherlist: [],
				num: 0,
				changeval: '',
				cardlist: [],
				btnShow:false,
				addmotherCard:'',
				Tips2:0,
				Tips3:false,
			}
		},
		created: function() {
			var that = this;
			that.script();
			that.getMother();
			setTimeout(function() {
				that.ReadCard();
				that.getcardnum();
			}, 1000);
		},
		inject: ['reload'],
		methods: {
			RefreshFun(){
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack(){
				this.$router.back(-1);
			},
			currentSel(val) {
				var that = this;
				for(var i = 0; i < that.motherlist.length; i++) {
					if(that.motherlist[i].card_sn == val) {
						that.value = that.motherlist[i]
					}
				}
			},
			radiochange(val){
				if(val==1){
					this.btnShow = false
				}else if(val==2){
					this.btnShow = true
				}
			},
			Cardmaking() {
				var that = this;
				if(that.cardnum == '') {
					that.$message({
						type: 'error',
						showClose: true,
						message: '水卡卡号为空',
						center: true
					});
					return false;
				}
				that.writeCard(that.value.bn);
				that.writeCard(that.value.bn2);
				that.writeCard(that.value.area_num);
			},
			//添加母卡
			addcard: function() {
				this.modelshow = true
			},
			closemodel: function() {
				this.modelshow = false;
			},
			addmother(){
				var that = this;
				if(that.addmotherCard==''){
					that.$message({
						type: 'error',
						showClose: true,
						message: '请输入母卡号',
						center: true
					});
					return false;
				}
				that.$post({
					url: "Partner/WaterCard/add_mother_card",
					data: {
						card: that.addmotherCard,
					},
					success: (data) => {
						if(data.code == 1000) {
							that.$message({
								type: 'success',
								showClose: true,
								message: '添加成功',
								center: true
							});
							that.modelshow = false;
							that.getMother();
						} else {
							that.$message({
								type: 'error',
								showClose: true,
								message:data.message,
								center: true
							});
						}
					}
				})
			},
			script: dkq,
			//写卡
			writeCard(num) {
				var that = this;

				if(that.value.bn == '' || that.value.key == '' || that.value.area_code == '' || that.value.area_num == '') {
					that.$message({
						type: 'error',
						showClose: true,
						message: '获取母卡信息失败',
						center: true
					});
					return false;
				}
				
				var BlockID = num;
				var Key = that.value.key;
				if(num == 25 || num == 26) {
					var Data = that.value.ms;
					//var Data = '00000000010000000000000000000000';
					var beep = 0;
				} else if(num == 24) {
					var Data = that.value.area_code;
					var beep = 1;
				}
				
				rfidreader.KeyMode = 1;
				rfidreader.KeyStringMode = 0;
				rfidreader.KeyString = Key;
				rfidreader.BeepOnSuccess=beep;
				rfidreader.Repeat = 0;
				rfidreader.M1WriteBlock(BlockID, Data, 0);
			},
			//读卡
			ReadCard() {
				var that = this;
				that.Tips3 = false;
				if(that.value.bn == '' || that.value.key == '' || that.value.area_code == '' || that.value.area_num == '') {
					that.$message({
						type: 'error',
						showClose: true,
						message: '获取母卡信息失败',
						center: true
					});
					return false;
				}
				var BlockID = 24;
				var Key = that.value.key;
				rfidreader.KeyMode = 1;
				rfidreader.KeyStringMode = 0;
				rfidreader.KeyString = Key;
				rfidreader.Repeat = 0
				rfidreader.M1ReadBlock(BlockID, 0);
			},
			getcardnum() {
				var that = this;
				rfidreader.onResult(function(resultdata) {
					switch(resultdata.FunctionID) {
						case 5:
							if(resultdata.Result > 0) {
								that.cardnum = (Array(10).join(0) + parseInt(resultdata.CardNo, 16)).slice(-10);
								if(resultdata.Result != -1) {
									that.state = '已连接'
								}
								//that.cardLib();
							} else {
								that.$message({
									type: 'warning',
									showClose: true,
									message: GetErrStr(resultdata.Result),
									center: true
								});
							}
							if(resultdata.Result == -6){
								that.Tips2 = 1;
								that.btnShow = true;
								break;
							}
							if(resultdata.strData == '00000000000000000000000000000000'){
								that.Tips2 = 0;
								that.Tips3 = false;
								break;
							}else if(resultdata.strData != that.value.area_code){
								that.Tips2 = 2;		
								that.btnShow = false;	
								that.radio = '1';					
								break;
							}else{
								//that.Tips2 = 0;
								that.Tips3 = true;
								that.btnShow = false;	
							}
							break;
						case 6:
							if(resultdata.Result > 0) {
								that.num++;
								if(that.num > 2) {
									that.num = 1;
								}
								if(that.num == 2) {
									that.Tips3 = true;
									that.tj();
								}
							} else {
								//alert("写入失败，错误：" + GetErrStr(resultdata.Result));
								that.$message({
									type: 'warning',
									showClose: true,
									message: GetErrStr(resultdata.Result),
									center: true
								});
							}
							if(resultdata.Result == -6){
								that.Tips2 = 1;
							}
							break;
					}
				});
			},
			//获取母卡
			getMother() {
				var that = this;
				that.cardlist = [];
				that.motherlist = [];
				that.$post({
					url: "Partner/WaterCard/get_mother",
					data: {},
					success: (data) => {
						if(data.code == 1000) {
							data.data.forEach(function(v, k) {
								var key = v.key.substring(2, v.key.length - 6);
								key = parseInt(key).toString(16);
								v.key = (Array(12).join(0) + key).slice(-12);
								v.area_num = parseInt(v.area_num, 16);
								v.bn = parseInt(v.bn, 16);
								v.bn2 = parseInt(v.bn2, 16);
								v.area_code = v.area_code.substring(5, v.area_code.length - 6);
								that.cardlist.push(v.card_sn)
								that.motherlist.push(v);
								if(k == 0) {
									that.changeval = v.card_sn
									that.value = v
								}
							})
						}
					}
				})
			},
			tj() {
				var that = this;
				var cards = [];
				if(that.cardnum == '') {
					that.$message({
						type: 'error',
						showClose: true,
						message: '水卡卡号为空',
						center: true
					});
					return false;
				}
				cards.push(that.cardnum);
				that.$post({
					url: "Partner/WaterCard/addCards",
					data: {
						cards: cards,
					},
					success: (data) => {
						if(data.code == 1000) {
							that.$message({
								type: 'success',
								showClose: true,
								message: '制卡成功',
								center: true
							});
							that.Tips3 = true;
							that.btnShow = true;
						} else {
							that.$message({
								type: 'warning',
								showClose: true,
								message: '制卡成功,' + data.message,
								center: true
							});
						}
					}
				})
			},
			//查询卡库卡号
			cardLib(){
				var that = this;				
				if(that.cardnum == '') {
					that.$message({
						type: 'error',
						showClose: true,
						message: '水卡卡号为空',
						center: true
					});
					return false;
				}			
				that.$post({
					url: "Partner/WaterCard/cardlib",
					data: {
						card: that.cardnum,
					},
					success: (data) => {
						if(data.code == 1000) {

						} else {
							that.$message({
								type: 'warning',
								showClose: true,
								message:  data.message,
								center: true
							});
							that.Tips3 = true;
							that.btnShow = true;
						}
					}
				})
			}
		},
		mounted() {

		},
		watch: {

		},
		computed: {

		},
		beforeDestroy() {
			
		},
	}
</script>

<style>
	#cardmaking .el-input {
		width: auto;
	}
	
	#cardmaking .searchitems {
		display: flex;
		align-items: center;
		padding: 10px 40px;
	}
	
	#cardmaking .searchitems .el-input__inner {
		border: 1px solid #d3d4d4;
		border-radius: 4px;
	}
	
	#cardmaking .searchitems button {
		height: 28px;
		line-height: 28px;
		padding: 0 25px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 4px;
		margin-left: 30px;
	}
	
	#cardmaking .addbtn {
		width: 28px;
		padding: 0 !important;
	}
	
	#cardmaking .el-radio__input.is-checked .el-radio__inner {
		border-color: #2c5586;
		background: #2c5586;
	}
	
	#cardmaking .el-radio__input.is-checked+.el-radio__label {
		color: #333;
	}
	
	#cardmaking .tips {
		font-size: 14px;
		color: #bf1a20;
	}
	
	#cardmaking .tips span {
		color: #323333;
	}
	
	#cardmaking .mackbtn {
		height: 28px;
		line-height: 28px;
		width: 160px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 4px;
		margin-top: 10px;
		margin-left: 150px;
	}
	
	#cardmaking .addmodel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 400px;
		height: 250px;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-shadow: 0 0 5px #888888;
	}
	
	#cardmaking .addmodel .toptitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		background-color: #2c5586;
		color: #fff;
		width: 90%;
		font-size: 18px;
		padding: 0 5%;
	}
	
	#cardmaking .addmodel .toptitle i {
		cursor: pointer;
	}
	
	#cardmaking .addmodel .inputitem {
		margin-top: 50px;
	}
	
	#cardmaking .addmodel button {
		height: 28px;
		line-height: 28px;
		width: 160px;
		background-color: #2c5586;
		color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 4px;
		margin-top: 30px;
	}
	
	#cardmaking .red {
		color: #bc1b21;
	}
	
	#cardmaking .green {
		color: #29af6b;
	}
	#cardmaking .clickno{
		background: #cccccc;
	}
	#cardmaking .disfle{
		display: flex;
		align-items: center;
	}
</style>